<template>
    <div class="login-container">
        <!-- 登录 -->
        <el-form class="login-form" 
        :rules = "loginRules" 
        :model="loginForm"
        ref="loginFormRef">
            <h2 class="title">城本热聊</h2>
            <el-form-item prop="userName" class="username">
                <el-input placeholder="请输入用户名" 
                prefix-icon="User" 
                v-model="loginForm.userName">
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input placeholder="请输入密码" 
                type="password" 
                prefix-icon="Lock" 
                v-model="loginForm.password">  
                </el-input>
            </el-form-item>
            <el-button class="login-btn" type="primary" plain @click="doLogin">登录</el-button>
            <div class="register-tip">
                没有账号？
                <el-link type="primary" @click="showRegisterDialog=true">立即注册</el-link>
            </div>
        </el-form>

        <!-- 注册对话框 -->
        <el-dialog width="500" title="注册" v-model="showRegisterDialog">
            <el-form label-width="100" :rules="registerRules" :model="registerForm" ref="registerFormRef">
                <el-form-item prop="userName" class="username" label="用户名:">
                    <el-input placeholder="请输入用户名" 
                    prefix-icon="User" 
                    v-model="registerForm.userName">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" class="password" label="密码:">
                    <el-input placeholder="请输入密码" 
                    type="password" 
                    prefix-icon="Lock" 
                    v-model="registerForm.password">  
                    </el-input>
                </el-form-item>
                <el-form-item prop="repassword"   label="确认密码:">
                    <el-input placeholder="请再次输入密码" 
                    type="password" 
                    prefix-icon="Lock" 
                    v-model="registerForm.repassword">  
                </el-input>
            </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showRegisterDialog=false">取消</el-button>
                 <el-button type="primary" @click="doRegister">注册</el-button>
                </div>
            </template>
        </el-dialog>
         
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import {reactive,ref} from 'vue'
import axios from '../api/axios'
import {useRouter} from 'vue-router'

const router=useRouter()

    const loginForm=reactive({
        userName:'',
        password:''
    })
    const loginRules =reactive({
        userName:[
            {required:true,message:'请输入用户名',trigger:'blur'},
            {min:4,max:20,message:'用户名长度在4-10位之间',trigger:'blur'}
        ],
        password:[
            {required:true,message:'请输入密码',trigger:'blur'},
            {min:6,max:20,message:'密码长度在6-20位之间',trigger:'blur'}
        ]
    })
    //控制注册对话的显示和隐藏
    const showRegisterDialog= ref(false)
    const registerForm=reactive({
        userName:'',
        password:'',
        repassword:''
    })
    const registerRules =reactive({
        userName:[
            {required:true,message:'请输入用户名',trigger:'blur'},
            {min:4,max:20,message:'用户名长度在4-10位之间',trigger:'blur'}
        ],
        password:[
            {required:true,message:'请输入密码',trigger:'blur'},
            {min:6,max:20,message:'密码长度在6-20位之间',trigger:'blur'}
        ],
        repassword:[
            {required:true,message:'请再次输入密码',trigger:'blur'},
            {min:6,max:20,message:'密码长度在6-20位之间',trigger:'blur'},
            {validator: (rule,value)=>{
                if(value!==registerForm.password){
                    return new Error('两次密码不一致')
                }
                return true
            }}
        ]
    })
//登录表单实例
    const loginFormRef=ref(null)
    const registerFormRef=ref(null)
    const doLogin=()=>{
        loginFormRef.value.validate(async valid=>{
            if(valid){
                // alert('成功')
                // ElMessage.success('登录成功')
                axios.post('/login',loginForm)
                .then(res=>{
                    if(res.data.success){
                        ElMessage.success('登录成功')
                        localStorage.setItem('user',JSON.stringify(res.data.user))
                        //将token保存到本地
                        localStorage.setItem('token',res.data.token)
                        //跳转到首页
                        router.push('/main')
                    }else{
                        ElMessage.error(res.data.message)
                    }
                })
            }else{
                // alert('失败')
                ElMessage.error('登录失败')
            }
        })
    }
    const doRegister=()=>{
        registerFormRef.value.validate(async valid=>{
            if(valid){
                // alert('成功')
                // ElMessage.success('注册成功')
                axios.post('/register',registerForm)
                .then(res=>{
                    if(res.data.success){
                        ElMessage.success('注册成功')
                        showRegisterDialog.value=false
                    }else{
                        ElMessage.error(res.data.message)
                    }
                })
            }else{
                // alert('失败')
                ElMessage.error('注册失败')
            }
        })
    }
    

</script>

<style lang="scss" scoped>
    @use '../assets/login.scss';
</style>